<template>
<div class="container-wrapper">
  <div class="animaicon s1"></div>
  <div class="animaicon s2"></div>
  <div class="animaicon s3"></div>
  <div class="container">
    <div class="logo-wrapper">
      <img src="~@/assets/aihuman/login-img/aihuman-login-huilan_logo.png"/>
    </div>
    <div class="content-wrapper">
      <img src="~@/assets/aihuman/login-img/aihuman-content.png" alt="" />
    </div>
    <div class="iconlogo">
      <img src="~@/assets/aihuman/login-img/aihuman-login-logo_icon.png" alt=""/>
    </div>
  </div>
  
</div>
</template>
<script>

</script>

<style scoped>
.container-wrapper {
  height: 100%;
  position: relative;
  overflow: hidden;
  /* background: url("~@/assets/loginNew/login-bg.png") -370px 25% no-repeat; */

  /* background-image: url("~@/assets/aihuman/login-img/aihuman-login-bg.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%; */
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.logo-wrapper {
  position: absolute;
  top: 5%;
  left: 5%;
  height: 10%;
  max-height: 60px;
  img {
    height: 100%;
    /* width: 100%; */
  }
}
.content-wrapper {
  position: absolute;
  top: 18%;
  left: 15%;
  height: 30%;
  max-height: 235px;
  img {
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
}
.iconlogo {
  position: absolute;
  left: 50%;
  bottom: 5%;
  height: 50%;
  max-height: 450px;
  transform: translate(-50%, 0);
  img {
    height: 100%;
  }
}
.animaicon {
  position: absolute;
  width: 120px;
  height: 120px;
  animation: animaicon-move 5s infinite alternate;
  background-repeat: no-repeat;
  background-size: auto;
  background-position: 50% 50%;

  &.s1 {
    top: 15%;
    right: 15%;
    background-image: url("~@/assets/aihuman/login-img/aihuman-login-1.png");
    transform: rotate(90deg);
    filter: blur(1px);
    animation-delay: 1s;
  }
  &.s2 {
    top: 65%;
    left: 5%;
    background-image: url("~@/assets/aihuman/login-img/aihuman-login-2.png");
    transform: rotate(0deg);
    opacity: 0.9;
    /* filter: blur(2px); */
  }
  &.s3 {
    top: 85%;
    right: 20%;
    background-image: url("~@/assets/aihuman/login-img/aihuman-login-3.png");
    animation-delay: 2s;
    transform: rotate(-40deg);
    filter: blur(1px);
  }
}


@keyframes animaicon-move {
  to {
    transform: rotate(40deg) translate(-20px, -20px);
  }
}
</style>
